import { useParams, useNavigate } from "react-router-dom"
import { Card, Button, Descriptions, Table } from "antd"
import { useState, useEffect } from "react"
import { IndividualUser } from "@api/order"
import { number } from "echarts"
export default function Show() {
  const navigate = useNavigate()
  const { id } = useParams()
  const [data, setData] = useState<any>({
    param: {},
  })

  const zzz = {
    userInfo: {
      id: 131,
      createTime: "",
      updateTime: "",
      isDeleted: "",
      param: {
        certificatesTypeString: "",
        statusString: "",
        authStatusString: "",
      },
      openid: "",
      nickName: "",
      phone: "",
      name: "",
      certificatesType: "",
      certificatesNo: "",
      certificatesUrl: "",
      authStatus: "",
      status: "",
    },
  }

  const [patientList, setPatientList] = useState()
  const columns: any = [
    {
      title: "序号",
      key: "index",
      render: (_a: any, _b: any, index: number): any => {
        return index + 1
      },
    },
    {
      title: "姓名",
      dataIndex: "name",
      key: "name",
    },
    {
      title: "证件类型",
      key: "certificatesTypeString",
      render: (row: any) => row.param.certificatesTypeString,
    },
    {
      title: "证件编号",
      key: "certificatesNo",
      dataIndex: "certificatesNo",
    },
    {
      title: "性别",
      dataIndex: "sex",
      key: "sex",
      render: (sex: number) => (sex ? "男" : "女"),
    },
    {
      title: "出生年月",
      key: "birthdate",
      dataIndex: "birthdate",
    },
    {
      title: "手机",
      key: "phone",
      dataIndex: "phone",
    },
    {
      title: "是否结婚",
      key: "isMarry",
      dataIndex: "isMarry",
      render: (isMarry: number) => (isMarry ? "已婚" : "未婚"),
    },
    {
      title: "地址",
      dataIndex: "address",
      key: "address",
    },
    {
      title: "注册时间",
      dataIndex: "createTime",
      key: "createTime",
    },
  ]

  // 挂载
  useEffect(() => {
    async function xxx() {
      const res = await IndividualUser(+(id as string))
      setData(res.userInfo)
    }
    xxx()
  }, [])
  console.log(data)
  return (
    <Card>
      <Descriptions
        bordered
        title="用户信息"
        column={2}
        contentStyle={{ width: 400, height: 50 }}
      >
        <Descriptions.Item label="手机号">{data.phone}</Descriptions.Item>
        <Descriptions.Item label="用户姓名">{data.name}</Descriptions.Item>
        <Descriptions.Item label="状态">
          {data.param.statusString}
        </Descriptions.Item>
        <Descriptions.Item label="注册时间">
          {data.createTime}
        </Descriptions.Item>
      </Descriptions>
      <Descriptions
        bordered
        title="认证信息"
        column={2}
        style={{ marginTop: 20 }}
        contentStyle={{ width: 400, height: 60 }}
      >
        <Descriptions.Item label="姓名">{data.name}</Descriptions.Item>
        <Descriptions.Item label="证件类型" span={2}>
          {data.param.certificatesTypeString}
        </Descriptions.Item>
        <Descriptions.Item label="证件号">
          {data.certificatesNo}
        </Descriptions.Item>
        <Descriptions.Item label="证件图片" span={2}>
          {}
        </Descriptions.Item>
      </Descriptions>
      <div style={{ marginTop: 20 }}>
        <div className="ant-descriptions-title" style={{ marginBottom: 20 }}>
          就诊人信息
        </div>
        <div className="ant-descriptions-view">
          <Table
            columns={columns}
            dataSource={patientList}
            pagination={false}
            bordered
          />
        </div>
      </div>
      <Button
        style={{ marginTop: 20 }}
        onClick={() => {
          navigate("/syt/order/orderInfo")
        }}
      >
        返回
      </Button>
    </Card>
  )
}
